<extend name="./public/frame.html"/>
<block name="content">
    <style>
        .layui-form-checkbox {margin-bottom: 5px;}
        .region_li{margin-top: 5px;border-bottom: 1px solid gainsboro;}
        .region_li:last-child{border-bottom:0}
    </style>
    <form class="layui-form" action="{:U('Admin/adminHandle')}" method="post">
        <input type="hidden" name="act" value="{$act}">
        <notempty name="info.admin_id">
            <input type="hidden" name="admin_id" value="{$info.admin_id}">
        </notempty>
        <table class="layui-table">
            <col width="10%" />
            <col width="70%" />
            <tr>
                <td>用户名</td>
                <td>
                    <input type="text" name="user_name" value="{$info.user_name}" lay-verify="required" placeholder="请输入用户名"
                           autocomplete="off" class="layui-input">
                </td>
            </tr>
            <tr>
                <td>联系方式</td>
                <td>
                    <input type="text" name="user_phone" value="{$info.user_phone}" lay-verify="phone" placeholder="请输入联系方式"
                           autocomplete="off" class="layui-input">
                </td>
            </tr>
            <tr>
                <td>角色类型</td>
                <td>
                    <select name="role_id" lay-verify="required" lay-filter="css">
                        <option value="">请选择角色</option>
                        <volist name="role" id="item">
                            <option value="{$item.role_id}"
                            <if condition="$item[role_id] eq $info[role_id]"> selected="selected"</if>
                            >{$item.role_name}</option>
                        </volist>
                    </select>
                </td>
            </tr>
            <tr>
                <td>管理级别</td>
                <td>
                    <select name="admin_type" lay-verify="required" lay-filter="admin_type" id="admin_type">
                        <option value="">请选择管理级别</option>
                        <volist name="levels" id="item">
                            <option value="{$key}" <if condition="$key == $info['admin_type']"> selected="selected"</if>>{$item}</option>
                        </volist>
                    </select>
                </td>
            </tr>
            <tr class="franchisee" <?php if($info['admin_type'] != 5):?>style="display:none;"<?php endif;?>>
                <td>关联加盟商</td>
                <td>
                    <?php foreach($franchiseeList as $key=>$value):?>
                    <?php if(in_array($value['id'],$info['franchiseeArr'])):?>
                    <input type="checkbox" name="franchisee[]" title="<?php echo $value['name'];?>" value="<?php echo $value['id'];?>" class="lay-input" checked>
                    <?php else:?>
                    <input type="checkbox" name="franchisee[]" title="<?php echo $value['name'];?>" value="<?php echo $value['id'];?>" class="lay-input">
                    <?php endif;?>
                    <?php endforeach;?>
                </td>
            </tr>
            <tr class="province01" <?php if($info['admin_type'] == 5):?>style="display:none;"<?php endif;?>>
                <td>省级区域</td>
                <td>
                    <input type="checkbox" value="all" title="全部" class="province_all pro" lay-filter="province" {$pro_all?'checked':''} {$info['admin_type']>1?'':'disabled'} >
                    <volist name="provinces" id="province">
                        <input type="checkbox" name="region[2][]" title="{$province}" value="{$key}"
                               class="lay-input province_child province pro" lay-filter="province" {$edit_provinces[$key]?'checked':''} {$info['admin_type']>1?'':'disabled'}>
                    </volist>
                </td>
            </tr>
            <tr class="city01" <?php if($info['admin_type'] == 5):?>style="display:none;"<?php else:?>id="city_" {$info['admin_type']>2 || 0 ?:'hidden'}<?php endif;?>>
                <td>市级区域</td>
                <td>
                    <ul id="city">
                        <volist name="edit_provinces" id="edit_pro">
                            <php>$pid = $key; $class = 'city_'.$pid;</php>
                            <li class="{$class} region_li">
                                <input type="checkbox" value="all" data-pid="{$pid}" title="{$edit_pro}"
                                       class="lay-input city_all_{$pid}" lay-filter="city" {$city_all[$pid]?'checked':''}>
                                <volist  name="$edit_citys[$pid]" id="city">
                                    <input type="checkbox" name="region[3][{$pid}][]" data-pid="{$pid}" title="{$city}" value="{$key}"
                                           class="lay-input city_child_{$pid} city" lay-filter="city"
                                    <if condition="in_array($key,$info['region'][3][$pid])">checked</if> >
                                </volist>
                            </li>
                        </volist>
                    </ul>
                </td>
            </tr>
            <tr class="county01" <?php if($info['admin_type'] == 5):?>style="display:none;"<?php else:?>id="county_" {$info['admin_type']==4 || 0 ?:'hidden'}<?php endif;?>>
                <td>区县级区域</td>
                <td>
                    <ul id="county">
                        <volist name="edit_city_ps" id="edit_cps">
                            <php>$gid = $key;</php>
                            <volist name="edit_cps" id="edit_cp">
                                <php>$pid = $key; $class = 'county_'.$pid; $class_g = 'city_'.$gid</php>
                                <li class="{$class} {$class_g} region_li">
                                    <input type="checkbox" value="all" data-pid="{$pid}" title="{$edit_cp}"
                                           class="lay-input county_all_{$pid}" lay-filter="county" {$county_all[$pid]?'checked':''}>
                                    <volist  name="$edit_countys[$gid][$pid]" id="county">
                                        <input type="checkbox" name="region[4][{$pid}][]" data-pid="{$pid}" title="{$county}" value="{$key}"
                                               class="lay-input county_child_{$pid} county" lay-filter="county"
                                        <if condition="in_array($key,$info['region'][4][$pid])">checked</if> >
                                    </volist>
                                </li>
                            </volist>
                        </volist>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>登录密码</td>
                <td>
                    <input type="text" name="password" value="{$info.password}" placeholder="登录密码,默认为123456"
                           autocomplete="off" class="layui-input" lay-verify="pass">
                </td>
            </tr>
            <tr>
                <td>是否为运力</td>
                <td>
                    <select name="is_css" class="layui-input" lay-filter="is_css" id="is_css">
                        <option value="2" <if condition="$item[is_css] eq 2"> selected="selected"</if> >否</option>
                        <option value="1" <if condition="$item[is_css] eq 1"> selected="selected"</if> >是</option>
                    </select>
                </td>
            </tr>
            <tr id="isCssName" <if condition="$info[is_css] eq 2"> style="display: none"</if>>
                <td>运力名称</td>
                <td>
                    <input type="text" name="their_name" value="{$info.their_name}" placeholder="运力名称" class="layui-input">
                </td>
            </tr>
        </table>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary reset">重置</button>
            </div>
        </div>
    </form>
    <div id="admin_area" style="padding: 0 auto"></div>

    <script>
        layui.use(['form'], function () {
            var form = layui.form, layer = layui.layer
                ,level = "{$info['admin_type']}" ,pro_tmp = [], cit_tmp =[],cou_tmp =[];
            $('.province').each(function () {
                if($(this).prop('checked')){
                    pro_tmp.push($(this).val());
                }
            });
            $('.city').each(function () {
                if($(this).prop('checked')){
                    cit_tmp.push($(this).val());
                }
            });
            $('.county').each(function () {
                if($(this).prop('checked')){
                    cou_tmp.push($(this).val());
                }
            });
            form.on('select(admin_type)',function (data) {

                if(level == 5){
                    $('.franchisee').css('display','');
                    $('.province01').hide();
                    $('.city01').hide();
                    $('.county01').hide();
                }else{
                    $('.franchisee').css('display','none');
                    $('.province01').show();
                    if(level>1){
                        $('.pro').each(function () {
                            $(this).prop({'disabled':false,'checked':false});
                        });
                    }else{
                        $('.pro').each(function () {
                            $(this).prop({'disabled':true,'checked':false});
                        })
                    }
                    $('#city').html('');
                    $('#county').html('');
                    $('#city_').hide();
                    $('#county_').hide();
                    pro_tmp = []; cit_tmp =[]; cou_tmp =[];
                    form.render('checkbox');
                }
            });
            form.on('select(is_css)',function (data) {

                var value = data.value;
                console.log(value)
                if(value==1){
                    $('#isCssName').show();
                }else{
                    $('#isCssName').hide();
                }
            });
            form.on('checkbox(province)',function (data) {
                var admin_type = $("#admin_type").val();
                if(admin_type == 3 || admin_type == 4){
                    $('.city01').show();
                }
                var elem = data.elem,value = data.value,check = elem.checked,all = $('.province_all'),
                    item = $('.province_child'),index = 0,flag = false,pro = [];
                switch (value) {
                    case 'all':
                        item.each(function () {
                            $(this).prop({'checked': check});
                            var ind = pro_tmp.indexOf($(this).val());
                            if(ind==-1){
                                pro.push($(this).val());
                                pro_tmp.push($(this).val());
                            }
                        });
                        if(!check){
                            pro=[];pro_tmp=[];
                            $('#city').html('');
                            $('#county').html('');
                            $('#city_').hide();
                            $('#county_').hide();
                        }
                        break;
                    default:
                        item.each(function () {
                            if ($(this).prop('checked')) {
                                index++;
                            }
                        });
                        if (index == item.length) {
                            flag = true;
                        }
                        all.prop({'checked': flag});
                        if(!check){
                            var ind = pro_tmp.indexOf(value);
                            if(ind>-1){
                                pro_tmp.splice(ind,1);
                            }
                            $('.city_'+value).remove();
                            if($('#city').children('li').length==0){
                                $('#city_').hide();
                            }
                            if($('#county').children('li').length==0){
                                $('#county_').hide();
                            }
                        }else{
                            pro = [];pro.push(value);pro_tmp.push(value);
                        }
                        break;
                }
                form.render('checkbox');
                if(pro.length > 0 && level > 2 ){
                    ajax(form,layer,pro,2,'city');
                }
            });
            form.on('checkbox(city)',function (data) {
                var admin_type = $("#admin_type").val();
                if(admin_type == 4){
                    $('.county01').show();
                }
                var elem = data.elem, value = data.value,check = elem.checked,all = $('.city_all_'+$(elem).data('pid')),
                    item = $('.city_child_'+$(elem).data('pid')),index = 0,flag = false,cit = [];
                switch (value) {
                    case 'all':
                        item.each(function () {
                            $(this).prop({'checked': check});
                            var ind = cit_tmp.indexOf($(this).val());
                            if(ind==-1){
                                cit.push($(this).val());
                                cit_tmp.push($(this).val());
                            }
                        });
                        if(!check){
                            cit=[];cit_tmp=[];
                            $('#county').html('');
                            $('#county_').hide();
                        }
                        form.render('checkbox');
                        break;
                    default:
                        item.each(function () {
                            if ($(this).prop('checked')) {
                                index++;
                            }
                        });
                        if (index == item.length) {
                            flag = true;
                        }
                        if(!check){
                            var ind = cit_tmp.indexOf(value);
                            if(ind>-1){
                                cit_tmp.splice(ind,1);
                            }
                            $('.county_'+value).remove();
                            if($('#county').children('li').length==0){
                                $('#county_').hide();
                            }
                        }
                        else{
                            cit = [];cit.push(value);cit_tmp.push(value);
                        }
                        all.prop({'checked': flag});
                        form.render('checkbox');
                }
                if(cit.length > 0 && level == 4){
                    ajax(form,layer,cit,3,'county');
                }
            });
            form.on('checkbox(county)',function (data) {
                var elem = data.elem, value = data.value,check = elem.checked,all = $('.county_all_'+$(elem).data('pid')),
                    item = $('.county_child_'+$(elem).data('pid')),index = 0,flag = false;
                switch (value) {
                    case 'all':
                        item.each(function () {
                            $(this).prop({'checked': check});
                            var ind = cou_tmp.indexOf($(this).val());
                            if(ind==-1){
                                cou_tmp.push($(this).val());
                            }
                        });
                        if(!check){
                            cit_tmp=[];
                        }
                        form.render('checkbox');
                        break;
                    default:
                        item.each(function () {
                            if ($(this).prop('checked')) {
                                index++;
                            }
                        });
                        if (index == item.length) {
                            flag = true;
                        }
                        if(!check){
                            var ind = cou_tmp.indexOf(value);
                            if(ind>-1){
                                cou_tmp.splice(ind,1);
                            }
                        }
                        else{
                            cou_tmp.push(value);
                        }
                        all.prop({'checked': flag});
                        form.render('checkbox');
                }
            });
            form.verify({
                pass: function (value, item) {
                    if(value!=''){
                        if (/^[\S]{6,12}$/.test(value) == false) {
                            return "密码必须6到12位，且不能出现空格";
                        }
                    }
                }
                ,phone: function (value, item) {
                    var reg = {$phone_reg};
                    if (reg.test(value) == false) {
                        return "手机号格式错误";
                    }
                }
            });
            //监听提交
            form.on('submit(submit)', function (data) {
                var flag = false;
                switch (parseInt(level)){
                    case 2:
                        if(pro_tmp.length==0){
                            flag = true;
                        }
                        break;
                    case 3:
                        if(pro_tmp.length==0 || cit_tmp.length==0){
                            flag = true;
                        }
                        break;
                    case 4:
                        if(pro_tmp.length==0 || cit_tmp.length==0 || cou_tmp.length==0){
                            flag = true;
                        }
                        break;
                    default:break;
                }
                if(flag){
                    layer.alert('请至少选择一个对应管理级别区域',{icon:2,title:'警告'});
                    return false;
                }
            });
            $('.reset').click(function () {
                $('#city').html('');
                $('#county').html('');
                $('#city_').hide();
                $('#county_').hide();
                $('.province_all').each(function () {
                    $(this).prop({'disabled':true,'checked':false});
                });
                pro_tmp = [];cit_tmp = [];cou_tmp = [];
                form.render('checkbox');
            })
        });
        function ajax(form,layer,pid,level,id) {
            $.post('{$url}',{pid:pid.join(','),level:level},function (res) {
                switch (res['status']){
                    case 1:
                        $('#'+id).append(res['html']);
                        form.render('checkbox');
                        $('#'+id+'_').show();
                        break;
                    default:
                        layer.alert(res['msg'],{icon:5});
                        break;
                }
            },'json')
        }

    </script>

</block>
